<template>
    <div class="resume-preview">
        <h1>{{ data.basic.name || '姓名' }}</h1>
        <p>{{ data.basic.title || '求职意向标题' }}</p>
        <img v-if="data.basic.photo" :src="data.basic.photo" class="preview-photo" />
        <section>
            <h3>基本信息</h3>
            <ul>
                <li v-if="data.basic.gender">性别：{{ data.basic.gender }}</li>
                <li v-if="data.basic.birth">出生：{{ data.basic.birth }}</li>
                <li v-if="data.basic.exp">工作年限：{{ data.basic.exp }}</li>
                <li v-if="data.basic.phone">电话：{{ data.basic.phone }}</li>
                <li v-if="data.basic.email">邮箱：{{ data.basic.email }}</li>
                <li v-if="data.basic.height || data.basic.weight">
                    身高/体重：{{ data.basic.height }} cm / {{ data.basic.weight }} kg
                </li>
                <li v-if="data.basic.nation">民族：{{ data.basic.nation }}</li>
                <li v-if="data.basic.nativePlace">籍贯：{{ data.basic.nativePlace }}</li>
                <li v-if="data.basic.politics">政治面貌：{{ data.basic.politics }}</li>
                <li v-for="(item, i) in data.basic.custom" :key="i">
                    {{ item.key }}：{{ item.value }}
                </li>
            </ul>
        </section>
        <section>
            <h3>求职意向</h3>
            <p>职位：{{ data.intention.position }}</p>
            <p>城市：{{ data.intention.city }}</p>
            <p>薪资：{{ data.intention.salary }}</p>
            <p>到岗时间：{{ data.intention.time }}</p>
        </section>

        <template v-for="(section, sectionKey) in sections">
            <section v-if="data[sectionKey] && data[sectionKey].length" :key="sectionKey">
                <h3>{{ section.title }}</h3>
                <ul>
                    <li v-for="item in data[sectionKey]" :key="item.id || sectionKey + '_' + index">
                        {{ formatItem(item) }}
                    </li>
                </ul>
            </section>
        </template>
    </div>
</template>

<script>
export default {
    props: {
        data: Object
    },
    data() {
        return {
            sections: {
                education: { title: '教育经历' },
                project: { title: '项目经历' },
                work: { title: '工作经历' },
                campus: { title: '校园经历' },
                skills: { title: '技能特长' },
                awards: { title: '荣誉证书' },
                selfIntro: { title: '自我评价' }
            }
        }
    },
    methods: {
        formatItem(item) {
            if (typeof item === 'string') return item
            if (item.name && item.desc) return `${item.name}：${item.desc}`
            return JSON.stringify(item)
        }
    }
}
</script>

<style scoped>
.resume-preview {
    padding: 20px;
    background-color: white;
    font-family: sans-serif;
    line-height: 1.6;
}

.preview-photo {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
}

section {
    margin-top: 20px;
}
</style>
